<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-aside clearfix">
        <el-button
          @click="rToCreate"
          type="primary"
          plain
          class="fr btn"
          v-hasAuth:system_authorityCreateOrganization
          >新增部门</el-button
        >
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table
            :data="pageAjax.data"
            stripe
            style="width: 100%"
            row-key="id"
          >
            <el-table-column prop="id" label="部门id"></el-table-column>
            <el-table-column prop="name" label="部门名称"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="navToDetail(scope.row.id)"
                  v-hasAuth:system_authorityOrganizationDetail
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="navToEdit(scope.row.id)"
                  v-hasAuth:system_authorityEditOrganization
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rDelete(scope.row.id)"
                  v-hasAuth:system_authorityDeleteOrganization
                  >删除</el-button
                >
                <span
                  v-hasAuth:system_authorityOrganizationDetail-system_authorityEditOrganization-system_authorityDeleteOrganization.invert
                  >—</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getOffspringnTree } from "@/assets/js/util.js";
import { deleteDepartment } from "@/api/authority.js";
import _ from "lodash";

export default {
  name: "system_authorityOrganizationList",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },

    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true
        }
      }
    }
  }),
  created() {
    let _that = this;
    _that.getPageData();
  },
  methods: {
    getPageData() {
      let _that = this;
      _that.$store.dispatch("getDepartmentList", { latest: true }).then(() => {
        let arr = _.cloneDeep(_that.$store.state.departmentList) || [];
        _that.pageAjax.orginData = _.cloneDeep(arr);
        _that.pageAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },

    rDelete(id) {
      let _that = this;
      _that
        .$confirm("你确定要删除此数据?", "删除提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          deleteDepartment({ id: id }).then(resp => {
            let respData = resp.data || {};

            if (respData.code === _that.STATUS.success[0]) {
              _that.$message.success(respData.msg || "删除成功");
              _that.getPageData();
            } else {
              _that.$message.error(respData.msg || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
    rToCreate() {
      this.$router.push({ name: "system_authorityCreateOrganization" });
    },
    navToEdit(id) {
      this.$router.push({
        name: "system_authorityEditOrganization",
        query: {
          id: id
        }
      });
    },
    navToDetail(id) {
      this.$router.push({
        name: "system_authorityOrganizationDetail",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
